// 实现这个项目的构建任务

const { src, dest, parallel, series, watch } = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
const swig = require('gulp-swig')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')

const plugins = loadPlugins()

const data = {
	menus: [
		{
			name: 'Home',
			icon: 'aperture',
			link: 'index.html',
		},
		{
			name: 'About',
			link: 'about.html',
		},
		{
			name: 'Contact',
			link: '#',
			children: [
				{
					name: 'Twitter',
					link: 'https://twitter.com/w_zce',
				},
				{
					name: 'About',
					link: 'https://weibo.com/zceme',
				},
				{
					name: 'divider',
				},
				{
					name: 'About',
					link: 'https://github.com/zce',
				},
			],
		},
	],
	pkg: require('./package.json'),
	date: new Date(),
}

// 定义样式任务
const style = () => {
	return src('src/assets/styles/*.scss', { base: 'src' })
		.pipe(sass({ outputStyle: 'expanded' }))
		.pipe(dest('temp'))
		.pipe(bs.reload({ stream: true }))
}

const script = () => {
	return src('src/assets/scripts/*.js', { base: 'src' })
		.pipe(babel({ presets: ['@babel/preset-env'] }))
		.pipe(dest('temp'))
		.pipe(bs.reload({ stream: true }))
}

const page = () => {
	return src(['src/*.html', 'src/layouts/*.html', 'src/partials/*.html'], {
		base: 'src',
	})
		.pipe(swig({ data }))
		.pipe(dest('temp'))
		.pipe(bs.reload({ stream: true }))
}

const image = () => {
	return src('src/assets/images/**', { base: 'src' }).pipe(dest('dist'))
}
const font = () => {
	return src('src/assets/fonts/**', { base: 'src' }).pipe(dest('dist'))
}

const clean = () => {
	return del(['dist', 'temp'])
}

const extra = () => {
	return src('public/**', { base: 'public' }).pipe(dest('dist'))
}

const bs = browserSync.create()
const serve = () => {
	watch('src/assets/styles/*.scss', style)
	watch('src/assets/scripts/*.js', script)
	watch(['src/*.html', 'src/layouts/*.html', 'src/partials/*.html'], page)
	watch(['src/assets/images/**', 'src/assets/fonts/**', 'public/**'], bs.reload)
	bs.init({
		notify: false,
		port: 8080,
		open: true,
		server: {
			baseDir: ['temp', 'src', 'public'],
			routes: {
				'/node_modules': 'node_modules',
			},
		},
	})
}

const useref = () => {
	return src('temp/*.html', { base: 'dist' })
		.pipe(plugins.useref({ searchPath: ['dist', '.'] }))
		.pipe(plugins.if(/\.js$/, plugins.uglify()))
		.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
		.pipe(
			plugins.if(
				/\.html$/,
				plugins.htmlmin({
					collapseWhitespace: true,
					minifyCSS: true,
					minifyJS: true,
				})
			)
		)
		.pipe(dest('dist'))
}

const compile = parallel(style, script, page)

const lint = parallel(style, script)

const build = series(
	clean,
	parallel(series(compile, useref), image, font, extra)
)

const start = series(compile, serve)

module.exports = {
	clean,
	lint,
	serve,
	build,
	start,
}
